<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-select v-model="selectClubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in optionsSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>

      </el-select>
      <el-input
        placeholder="请输入社团名称"
        v-model="clubName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getClubList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: auto">

            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="社团描述：">
                    <span>{{ props.row.clubDescribe }}</span>
                  </el-form-item>
                  <el-form-item label="社团通知：">
                    <span>{{ props.row.clubNotice }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="社团名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubIntroduce"
        label="社团介绍"
        width="350">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="clubDescribe"-->
<!--        label="社团描述"-->
<!--        width="250">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="clubNotice"-->
<!--        label="社团通知"-->
<!--        width="250">-->
<!--      </el-table-column>-->
      <el-table-column
        label="申请时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="社团状态"
        width="150">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.clubStatus==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.clubStatus==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.clubStatus==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.clubStatus==3">禁用中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column

        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.createUserId)" type="text" size="small">查看创建人</el-button>
          <el-button type="text" size="small" @click="selectClub(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeClubList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-select v-model="clubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateClub">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="创建人"
      :visible.sync="createUserVisible"
      center>
      <el-table :data="createUserData1">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="150"></el-table-column>
        <el-table-column property="association" label="所属组织" ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createUserVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import {getClubPageList, auditClub} from '../../../api/club.js';
  import {getDateTime1} from "../../../utils/dateTimeUtil";
  import {getClubManager} from "../../../api/club";

  export default {
    name: "ClubAudit",
    data() {
      return {
        userId: null,
        dialogVisible: false,
        options: [{
          value: 0,
          label: '待审核'
        }, {
          value: 1,
          label: '审核通过'
        }, {
          value: 2,
          label: '不通过'
        }, {
          value: 3,
          label: '禁用'
        }],
        clubStatusValue: 0,
        clubList: [],
        page: {
          total: 2,
          current: 1,
          records: [],
          pages: 2,
        },
        selectedClub: null,
        selectClubStatusValue: -1,
        optionsSelect: [{
          value: -1,
          label: '全部'
        }, {
          value: 0,
          label: '待审核'
        }, {
          value: 1,
          label: '审核通过'
        }, {
          value: 2,
          label: '不通过'
        }, {
          value: 3,
          label: '禁用'
        }],
        clubName: null,
        createUserVisible: false,
        createUserData1: [],
      }
    },
    created() {
      this.getClubList();
    },
    methods: {
      changeClubList(val) {
        console.log(val)
        this.page.current = val;
        this.getClubList();
      },
      getClubList() {
        getClubPageList({
          status: this.selectClubStatusValue,
          currentPage: this.page.current,
          clubName: this.clubName
        }).then(res => {
          this.page = res.data;
          console.log(this.page.pages)
        })
      },
      handleClose() {
        this.dialogVisible = false;
      },
      selectClub(val) {
        this.selectedClub = val;
        this.dialogVisible = true;
        this.clubStatusValue = val.clubStatus;
        this.userId = val.createUserId;
      },
      updateClub() {
        this.dialogVisible = false;
        let temp = new Object();
        temp.id = this.selectedClub.id;
        temp.clubStatus = this.clubStatusValue;
        temp.userId = this.userId;
        auditClub(temp).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message
            });
          }
          this.getClubList();
        })
      },
      getDateTime(val) {
        return getDateTime1(val);
      },
      handleClick(createUserId) {
        console.log("sss:",createUserId)
        getClubManager({
          createUserId: createUserId,
        }).then(res => {
          if (res.code == 200) {
            console.log(res.data)
            this.createUserVisible = true;
            this.createUserData1 = res.data
          }
        })
      }

    }
  }

</script>

<style Lang="less" scoped>
.demo-table-expand{
  margin: 10px;
}
.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

</style>
